<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！ &copy;瑞金佬的前端路</title>
<link rel="stylesheet" href="demo/css/style.css" type="text/css" media="all" />
<link href="demo/css/demo.css" type="text/css" rel="stylesheet" />
</head>

<body>  
<div class="header">
    <div class="wraper">
    	<h1><a href="http://validform.rjboy.cn">Validform</a></h1>
        <ul class="nav">
            <li><a href="http://validform.rjboy.cn/">关于Validform</a></li>
            <li><a href="demo.html" class="current">Demo</a></li>
            <li><a href="document.html">文档</a></li>
            <li><a href="help.html">帮助</a></li>
            <li><a href="http://validform.rjboy.cn/?p=1">网友讨论</a></li>
        </ul>
    </div>
</div>

<div class="main">
    <div class="wraper">
        <p class="tr"><a href="demo.html" class="blue ml10 fz12">返回示例首页&raquo;</a></p>
        
    	<h2 class="green">表单验证通过后上传文件</h2>
        
        <form class="registerform" id="demo2" action="demo/plugin/swfupload/thanks.php" enctype="multipart/form-data" method="post">
            <table width="100%" style="table-layout:fixed;">
                <tr>
                    <td class="need" style="width:10px;">*</td>
                    <td style="width:70px;">昵称：</td>
                    <td style="width:360px;"><input type="text" value="" name="name" class="inputxt" datatype="s6-18" errormsg="昵称至少6个字符,最多18个字符！" /></td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td>附件：</td>
                    <td>
                        <input type="text" value="" id="txtFileName2" disabled="disabled" autocomplete="off" class="inputxt" plugin="swfupload" /> <span id="spanButtonPlaceholder"></span> (10 MB max)
                        <input type="hidden" pluginhidden="swfupload" name="hidFileID" id="hidFileID" value="" />
                        <!-- This is where the file ID is stored after SWFUpload uploads the file and gets the ID back from upload.php -->
                    </td>
                    <td><div class="Validform_checktip"></div></td>
                </tr>
                <tr>
                    <td class="need"></td>
                    <td></td>
                    <td colspan="2" style="padding:10px 0 18px 0;">
                        <input type="submit" value="提 交" /> <input type="reset" value="重 置" />
                    </td>
                </tr>
            </table>
        </form>
        
        <h2>说明：</h2>
        <div class="tipmsg">
        	<p>需要另外引入相关的js文件。<a target="_blank" href="http://demo.swfupload.org/Documentation">去官网查看详细使用方法»</a></p>
        </div>
         
    </div>
</div>

<div class="footer">
    <div class="wraper">
        <p class="fl">Copyright &copy; <a href="http://www.eloocor.com" target="_blank">易罗客</a></p>
        <p class="fr"><a href="http://www.rjboy.cn" target="_blank">瑞金佬的前端路</a><b> | </b><a href="http://validform.rjboy.cn">Validform</a><b> | </b><a href="http://www.rjboy.cn/?p=789" target="_blank">hScrollpane</a><b> | </b><a href="http://www.rjboy.cn/?p=708" target="_blank">Xslider</a></p>
    </div>
</div>

<script type="text/javascript" src="demo/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="demo/js/Validform_v5.3.2_min.js"></script>

<script type="text/javascript" src="demo/plugin/swfupload/swfuploadv2.2-min.js"></script>
<script type="text/javascript" src="demo/plugin/swfupload/Validform.swfupload.handler-min.js"></script>

<script type="text/javascript">
$(function(){
	//$(".registerform").Validform();  //就这一行代码！;
		
	$(".registerform").Validform({
		tiptype:2,
		usePlugin:{
			swfupload:{
				file_post_name: "resume_file",
				upload_url: "demo/plugin/swfupload/upload.php",
				button_image_url: "demo/plugin/swfupload/XPButtonUploadText_61x22.png",
				flash_url: "demo/plugin/swfupload/swfupload.swf",
				
				//覆盖默认绑定好的事件;
				file_dialog_complete_handler:function(){
					//reset the default event;
				},
				upload_complete_handler:function(){
					//文件上传完成后触发表单提交事件，通过this.customSettings.form可取得当前表单对象;
					this.customSettings.form.get(0).submit();
				}
			}
		},
		callback:function(){
			//可用通过 swfuploadhandler.SWFUPLOAD_demo2_0 获取到当前表单下的swfupload对象;
			//swfuploadhandler是默认的事件对象,里面预设好了swfupload对象各事件触发时的动作函数;
			//SWFUPLOAD_[demo2]_[0] => SWFUPLOAD_[该表单的ID]_[该表单在Validform初始化时的索引值];
			if(swfuploadhandler.SWFUPLOAD_demo2_0.customSettings.form.find("[plugin*='swfupload']").val()===""){
				swfuploadhandler.SWFUPLOAD_demo2_0.customSettings.form.get(0).submit();
			};
			//针对非ajax表单提交方式，可以在这里触发上传事件，这样可以实现表单验证全部通过才上传文件;
			swfuploadhandler.SWFUPLOAD_demo2_0.startUpload();
			
			return false;
		}
	});
})
</script>
</body>
</html>